<template>
  <h2>Page - {{ $store.state.counter }}</h2>
  <button @click="increase">+1</button>
  <button @click="decrease">-1</button>
  <button @click="add">mapActions +1</button>
  <button @click="sub">mapActions -1</button>
  <ul v-for="(item, index) in $store.state.banners" :key="index">
    <li>{{ item }}</li>
  </ul>
</template>

<script>
import { onMounted } from 'vue'
import { useStore, mapActions } from 'vuex'
export default {
  methods: {
    increase() {
      this.$store.dispatch('increaseAction', { name: 'slim', age: 18 })
    },
    decrease() {
      this.$store.dispatch({
        type: 'decreaseAction',
        name: 'nolan',
        age: 18
      })
    }
    // ...mapActions(['increaseAction', 'decreaseAction']),
    // ...mapActions({
    //   add: 'increaseAction',
    //   sub: 'decreaseAction'
    // })
  },
  created() {
    this.$store.dispatch('getRemoteData')
  },
  setup() {
    const actions = mapActions(['increaseAction', 'decreaseAction'])
    const actions2 = mapActions({
      add: 'increaseAction',
      sub: 'decreaseAction'
    })

    const store = useStore()
    onMounted(() => {
      const promise = store.dispatch('getRemoteData')
      promise
        .then((res) => {
          console.log(res)
        })
        .catch((err) => {
          console.log(err)
        })
    })

    return {
      ...actions,
      ...actions2
    }
  }
}
</script>

<style scoped></style>
